<template>
  <div class="bordercontents3" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <defs>
        <!-- 线性渐变 -->
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color: red; stop-opacity: 1" />
          <stop offset="100%" style="stop-color: #007fff; stop-opacity: 1" />
        </linearGradient>
        <filter id="filterId" height="150%" width="150%" x="-25%" y="-25%">
          <!-- 该滤镜用来侵蚀或扩张输入图像，主要用于在增肥或瘦身效果方面 -->
          <!-- in 可选值：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint -->
          <!-- radius 属性代表了 一个定给《feMorphology》滤镜上的操作，如果提供了两个<number>,则第一个数代表了x-radius,第二数代表了y-radius,如果只提供了一个数字，则值同时用于x和y。值是在filter元素的primitiveUnits 确定的坐标系统内 -->
          <feMorphology
            operator="dilate"
            radius="2"
            in="SourceAlpha"
            result="thicken"
          />
          <!-- 高斯模糊 -->
          <!-- in 标识为给定的滤镜原始输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint  -->
          <!-- stdDeviation 模糊量 -->
          <feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
          <!-- <feFlood>使用定义好的颜色flood-color和透明度flood-opacity填充了滤镜的分区 -->
          <!-- （x，y）、width、height定义了绘制矩形的范围， flood-color（探照灯 或 泛滥）颜色 flood-opacity （探照灯 或 泛滥）透明度 -->
          <feFlood flood-color="rgba(8, 230, 238, 0.63)" result="glowColor" />

          <!-- <feBlend> 将一个特定混合模式将两个对象组合到一起，类似合并图层 in、in2 标识为给定的滤镜原始输入 -->
          <!-- mode 混合模式：normal | multiply | screen | darken | lighten -->
          <!-- feComposite 该路径执行两个输入图像的智能像素组合，在图像空间中使用合成操作之一：over,in,atop,xor -->
          <feComposite
            in="glowColor"
            in2="blurred"
            operator="in"
            result="softGlowColored"
          />
          <!-- feMerge 滤镜允许同时应用滤镜效果而不是按顺序应用滤镜，利用result储存别的路径的输触可以实现这条一点，然后在一个<feMeergeNode>子元素中访问他 -->
          <feMerge>
            <feMergeNode in="softGlowColored" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>
      <polyline
        class="dv-bb7-line-width-2"
        points="0, 55 0, 0 55, 0"
        style="fill: none; stroke-opacity: 0.5"
      />
      <polyline
        class="dv-bb7-line-width-3"
        filter="url(#filterId)"
        fill="url(#grad1)"
        points="5, 70 5, 5 70, 5"
        style="fill: none; stroke-opacity: 0.5"
      />
    
      <!-- 右下 -->
      <polyline
        class="dv-bb7-line-width-2"
        :points="`${width - 55},${height} ${width},${height} ${width}, ${
          height - 55
        }`"
        style="fill: none; stroke-opacity: 0.5"
      />
      <polyline
        class="dv-bb7-line-width-3"
        filter="url(#filterId)"
        :points="`${width - 70},${height - 5} ${width - 5},${height - 5} ${
          width - 5
        }, ${height - 70}`"
        style="fill: none; stroke-opacity: 0.5"
      />
      <!-- 左下 -->
      
    </svg>
    <div class="echartCon">
      <div>
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
import autoMinix from "../autoResize.js";
import {defineComponent,toRaw} from "vue-demi";

export default defineComponent({
  name: "VDorderLine3",
  mixins: [autoMinix],
  data(){
     return {
       ref:'VDorderLine3',
     }
  }, 
  setup(){
      let ref  = toRaw("vborder1")
     return {
        ref
     }
  }
})
</script>
<style lang="less" scoped>
.dv-border-svg-container > polyline {
  stroke-linecap: round;
}
.dv-bb7-line-width-2 {
  stroke-width: 3;
  stroke: #2feefb;
}
.dv-bb7-line-width-3 {
  stroke-width: 2;
  stroke: #2feefb;
}
.bordercontents3 {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-border-svg-container {
  position: absolute;
  top: 0;
  left: 0;
}
.echartCon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0.3rem 0.3rem;
  box-sizing: border-box;
}
.echartCon > div {
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 40px rgba(8, 230, 238, 0.13);
}
</style>